<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>升级模块脚本管理工具</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            'gray-light': '#F2F3F5',
            'gray-medium': '#C9CDD4',
            'gray-dark': '#86909C'
          }
        }
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .script-required {
        @apply text-xs px-1.5 py-0.5 rounded bg-primary/10 text-primary;
      }
      .script-missing {
        @apply text-xs px-1.5 py-0.5 rounded bg-danger/10 text-danger;
      }
      .script-uploaded {
        @apply text-xs px-1.5 py-0.5 rounded bg-success/10 text-success;
      }
      .scale-in {
        animation: scaleIn 0.3s ease-out forwards;
      }
      @keyframes scaleIn {
        from { transform: scale(0.95); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
      }
    }
  </style>
</head>

<body class="bg-gray-50 min-h-screen flex flex-col">
  <!-- 顶部导航 -->
  <header class="bg-white shadow-sm border-b border-gray-200">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <i class="fa fa-code text-primary text-2xl"></i>
        <h1 class="text-xl font-semibold">升级模块脚本管理工具</h1>
      </div>
      <div class="flex items-center space-x-4">
        <button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors" onclick="window.location.href='打包流程.html'">
          <i class="fa fa-arrow-left"></i>
          <span>返回打包流程</span>
        </button>
        <div class="h-6 w-px bg-gray-300"></div>
        <div class="flex items-center space-x-2">
          <i class="fa fa-user-circle-o text-gray-500"></i>
          <span class="text-sm">管理员</span>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 py-6">
    <!-- 功能按钮区 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
      <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
          <h2 class="text-lg font-semibold">脚本包管理</h2>
          <p class="text-sm text-gray-dark mt-1">管理升级所需的脚本包，每个包必须包含10个固定脚本</p>
        </div>
        <div class="flex flex-wrap gap-3">
          <button id="newPackageBtn" class="border border-primary text-primary hover:bg-primary/5 px-4 py-2 rounded-lg flex items-center space-x-2 transition-all">
            <i class="fa fa-plus"></i>
            <span>新建空白脚本包</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="flex flex-col lg:flex-row gap-6">
      <!-- 左侧：脚本包列表 -->
      <div class="w-full lg:w-1/3">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden sticky top-4">
          <div class="p-4 border-b border-gray-200 bg-gray-50">
            <div class="flex items-center justify-between">
              <h3 class="font-medium">脚本包列表</h3>
              <div class="relative w-36">
                <input type="text" id="packageSearch" placeholder="搜索脚本包..." 
                       class="pl-7 pr-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-full">
                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
              </div>
            </div>
          </div>
          
          <div class="max-h-[calc(100vh-240px)] overflow-y-auto">
            <div id="packageList" class="divide-y divide-gray-100">
              <!-- 脚本包1：完整 -->
              <div class="p-4 hover:bg-gray-50 transition-colors cursor-pointer package-item active" data-package-id="1">
                <div class="flex justify-between items-start">
                  <div>
                    <h4 class="font-medium">基础脚本包</h4>
                    <p class="text-xs text-gray-dark mt-0.5">创建于 2023-08-10</p>
                  </div>
                  <span class="script-uploaded">完整</span>
                </div>
                <div class="mt-2 flex items-center justify-between text-sm">
                  <span class="text-gray-dark">包含 10 个脚本</span>
                  <button class="text-primary view-package-btn" data-package-id="1">查看详情</button>
                </div>
              </div>
              
              <!-- 脚本包2：不完整 -->
              <div class="p-4 hover:bg-gray-50 transition-colors cursor-pointer package-item" data-package-id="2">
                <div class="flex justify-between items-start">
                  <div>
                    <h4 class="font-medium">增强脚本包</h4>
                    <p class="text-xs text-gray-dark mt-0.5">创建于 2023-08-15</p>
                  </div>
                  <span class="script-missing">不完整</span>
                </div>
                <div class="mt-2 flex items-center justify-between text-sm">
                  <span class="text-gray-dark">包含 8 个脚本（缺2个）</span>
                  <button class="text-primary view-package-btn" data-package-id="2">查看详情</button>
                </div>
              </div>
              
              <!-- 脚本包3：空白 -->
              <div class="p-4 hover:bg-gray-50 transition-colors cursor-pointer package-item" data-package-id="3">
                <div class="flex justify-between items-start">
                  <div>
                    <h4 class="font-medium">自定义脚本包</h4>
                    <p class="text-xs text-gray-dark mt-0.5">创建于 2023-08-20</p>
                  </div>
                  <span class="script-missing">未上传</span>
                </div>
                <div class="mt-2 flex items-center justify-between text-sm">
                  <span class="text-gray-dark">包含 0 个脚本</span>
                  <button class="text-primary view-package-btn" data-package-id="3">查看详情</button>
                </div>
              </div>
            </div>
          </div>
          
          <div class="p-4 border-t border-gray-200 bg-gray-50">
            <div class="text-sm text-gray-dark">
              <p>提示：点击脚本包可查看详情，每个脚本包必须包含10个固定脚本才能使用</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧：脚本包详情 -->
      <div class="w-full lg:w-2/3">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
          <div class="p-4 border-b border-gray-200 flex flex-wrap items-center justify-between gap-2">
            <div>
              <h3 class="font-medium" id="currentPackageTitle">基础脚本包</h3>
              <p class="text-sm text-gray-dark mt-0.5" id="currentPackageInfo">创建于 2023-08-10 · 包含 10 个脚本</p>
            </div>
            <div class="flex flex-wrap gap-2">
              <button id="deletePackageBtn" class="border border-danger text-danger hover:bg-danger/5 px-3 py-1.5 rounded-lg flex items-center text-sm transition-all">
                <i class="fa fa-trash mr-1"></i>
                <span>删除</span>
              </button>
            </div>
          </div>
          
          <div class="p-6">
            <!-- 脚本包基本信息 -->
            <div class="mb-6">
              <h4 class="font-medium mb-3 flex items-center">
                <i class="fa fa-info-circle text-primary mr-2"></i> 脚本包信息
              </h4>
              <div class="grid grid-cols-1 gap-4">
                <div>
                  <label class="block text-sm text-gray-dark mb-1">脚本包名称</label>
                  <input type="text" id="packageName" value="基础脚本包" 
                         class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                </div>
              </div>
              <div class="mt-3 flex justify-end">
                <button id="savePackageInfoBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center text-sm transition-all">
                  <i class="fa fa-save mr-1"></i>
                  <span>保存信息</span>
                </button>
              </div>
            </div>
            
            <!-- 脚本文件列表（固定10个） -->
            <div>
              <div class="flex flex-wrap items-center justify-between mb-3">
                <h4 class="font-medium flex items-center">
                  <i class="fa fa-file-code-o text-primary mr-2"></i> 必需脚本文件
                </h4>
                <button id="batchUploadScriptsBtn" class="text-primary hover:text-primary/80 text-sm flex items-center transition-colors">
                  <i class="fa fa-upload mr-1"></i>
                  <span>批量上传脚本</span>
                </button>
              </div>
              
              <!-- 提示信息 -->
              <div class="bg-gray-light rounded-lg p-3 mb-4 text-sm">
                <p class="flex items-center">
                  <i class="fa fa-info-circle text-primary mr-2"></i>
                  每个脚本包必须包含以下10个固定脚本，文件名必须严格匹配
                </p>
              </div>
              
              <!-- 脚本表格 -->
              <div class="overflow-x-auto">
                <table class="w-full border-collapse">
                  <thead>
                    <tr class="bg-gray-50">
                      <th class="px-4 py-3 text-left text-sm font-medium text-gray-dark border-b">脚本类型</th>
                      <th class="px-4 py-3 text-left text-sm font-medium text-gray-dark border-b">文件名</th>
                      <th class="px-4 py-3 text-left text-sm font-medium text-gray-dark border-b">上传时间</th>
                      <th class="px-4 py-3 text-left text-sm font-medium text-gray-dark border-b">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- 脚本1：已上传 -->
                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="script-required mr-2">代码检查</span>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="font-medium">CODE_CHECK.sh</span>
                          <span class="script-uploaded ml-2">已上传</span>
                        </div>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-dark">2023-08-10 14:30</td>
                      <td class="px-4 py-3">
                        <div class="flex space-x-2">
                          <button class="text-primary hover:text-primary/80 view-script-btn" 
                                  data-script="CODE_CHECK.sh" data-type="代码检查">
                            <i class="fa fa-eye" title="查看"></i>
                          </button>
                          <button class="text-primary hover:text-primary/80 download-script-btn" 
                                  data-script="CODE_CHECK.sh">
                            <i class="fa fa-download" title="下载"></i>
                          </button>
                          <button class="text-warning hover:text-warning/80 replace-script-btn" 
                                  data-script="CODE_CHECK.sh" data-type="代码检查">
                            <i class="fa fa-refresh" title="替换"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                    
                    <!-- 脚本2：已上传 -->
                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="script-required mr-2">完整性校验</span>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="font-medium">INTERGRITY_CHECK.sh</span>
                          <span class="script-uploaded ml-2">已上传</span>
                        </div>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-dark">2023-08-10 14:31</td>
                      <td class="px-4 py-3">
                        <div class="flex space-x-2">
                          <button class="text-primary hover:text-primary/80 view-script-btn" 
                                  data-script="INTERGRITY_CHECK.sh" data-type="完整性校验">
                            <i class="fa fa-eye" title="查看"></i>
                          </button>
                          <button class="text-primary hover:text-primary/80 download-script-btn" 
                                  data-script="INTERGRITY_CHECK.sh">
                            <i class="fa fa-download" title="下载"></i>
                          </button>
                          <button class="text-warning hover:text-warning/80 replace-script-btn" 
                                  data-script="INTERGRITY_CHECK.sh" data-type="完整性校验">
                            <i class="fa fa-refresh" title="替换"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                    
                    <!-- 脚本3：已上传 -->
                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="script-required mr-2">环境安全检查</span>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="font-medium">SECURITY_CHECK.sh</span>
                          <span class="script-uploaded ml-2">已上传</span>
                        </div>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-dark">2023-08-10 14:32</td>
                      <td class="px-4 py-3">
                        <div class="flex space-x-2">
                          <button class="text-primary hover:text-primary/80 view-script-btn" 
                                  data-script="SECURITY_CHECK.sh" data-type="环境安全检查">
                            <i class="fa fa-eye" title="查看"></i>
                          </button>
                          <button class="text-primary hover:text-primary/80 download-script-btn" 
                                  data-script="SECURITY_CHECK.sh">
                            <i class="fa fa-download" title="下载"></i>
                          </button>
                          <button class="text-warning hover:text-warning/80 replace-script-btn" 
                                  data-script="SECURITY_CHECK.sh" data-type="环境安全检查">
                            <i class="fa fa-refresh" title="替换"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                    
                    <!-- 脚本4：已上传 -->
                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="script-required mr-2">配置文件网关检查</span>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="font-medium">CONFIG_CENTER_CHECK.sh</span>
                          <span class="script-uploaded ml-2">已上传</span>
                        </div>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-dark">2023-08-10 14:33</td>
                      <td class="px-4 py-3">
                        <div class="flex space-x-2">
                          <button class="text-primary hover:text-primary/80 view-script-btn" 
                                  data-script="CONFIG_CENTER_CHECK.sh" data-type="配置文件网关检查">
                            <i class="fa fa-eye" title="查看"></i>
                          </button>
                          <button class="text-primary hover:text-primary/80 download-script-btn" 
                                  data-script="CONFIG_CENTER_CHECK.sh">
                            <i class="fa fa-download" title="下载"></i>
                          </button>
                          <button class="text-warning hover:text-warning/80 replace-script-btn" 
                                  data-script="CONFIG_CENTER_CHECK.sh" data-type="配置文件网关检查">
                            <i class="fa fa-refresh" title="替换"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                    
                    <!-- 脚本5：已上传 -->
                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="script-required mr-2">备份</span>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="font-medium">BACKUP.sh</span>
                          <span class="script-uploaded ml-2">已上传</span>
                        </div>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-dark">2023-08-10 14:34</td>
                      <td class="px-4 py-3">
                        <div class="flex space-x-2">
                          <button class="text-primary hover:text-primary/80 view-script-btn" 
                                  data-script="BACKUP.sh" data-type="备份">
                            <i class="fa fa-eye" title="查看"></i>
                          </button>
                          <button class="text-primary hover:text-primary/80 download-script-btn" 
                                  data-script="BACKUP.sh">
                            <i class="fa fa-download" title="下载"></i>
                          </button>
                          <button class="text-warning hover:text-warning/80 replace-script-btn" 
                                  data-script="BACKUP.sh" data-type="备份">
                            <i class="fa fa-refresh" title="替换"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                    
                    <!-- 脚本6：已上传 -->
                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="script-required mr-2">参数配置</span>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="font-medium">CONFIG_CHECK.sh</span>
                          <span class="script-uploaded ml-2">已上传</span>
                        </div>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-dark">2023-08-10 14:35</td>
                      <td class="px-4 py-3">
                        <div class="flex space-x-2">
                          <button class="text-primary hover:text-primary/80 view-script-btn" 
                                  data-script="CONFIG_CHECK.sh" data-type="参数配置">
                            <i class="fa fa-eye" title="查看"></i>
                          </button>
                          <button class="text-primary hover:text-primary/80 download-script-btn" 
                                  data-script="CONFIG_CHECK.sh">
                            <i class="fa fa-download" title="下载"></i>
                          </button>
                          <button class="text-warning hover:text-warning/80 replace-script-btn" 
                                  data-script="CONFIG_CHECK.sh" data-type="参数配置">
                            <i class="fa fa-refresh" title="替换"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                    
                    <!-- 脚本7：已上传 -->
                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="script-required mr-2">释放用户</span>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="font-medium">RELEASE_USER.sh</span>
                          <span class="script-uploaded ml-2">已上传</span>
                        </div>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-dark">2023-08-10 14:36</td>
                      <td class="px-4 py-3">
                        <div class="flex space-x-2">
                          <button class="text-primary hover:text-primary/80 view-script-btn" 
                                  data-script="RELEASE_USER.sh" data-type="释放用户">
                            <i class="fa fa-eye" title="查看"></i>
                          </button>
                          <button class="text-primary hover:text-primary/80 download-script-btn" 
                                  data-script="RELEASE_USER.sh">
                            <i class="fa fa-download" title="下载"></i>
                          </button>
                          <button class="text-warning hover:text-warning/80 replace-script-btn" 
                                  data-script="RELEASE_USER.sh" data-type="释放用户">
                            <i class="fa fa-refresh" title="替换"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                    
                    <!-- 脚本8：已上传 -->
                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="script-required mr-2">装载</span>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="font-medium">UPGRADE.sh</span>
                          <span class="script-uploaded ml-2">已上传</span>
                        </div>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-dark">2023-08-10 14:37</td>
                      <td class="px-4 py-3">
                        <div class="flex space-x-2">
                          <button class="text-primary hover:text-primary/80 view-script-btn" 
                                  data-script="UPGRADE.sh" data-type="装载">
                            <i class="fa fa-eye" title="查看"></i>
                          </button>
                          <button class="text-primary hover:text-primary/80 download-script-btn" 
                                  data-script="UPGRADE.sh">
                            <i class="fa fa-download" title="下载"></i>
                          </button>
                          <button class="text-warning hover:text-warning/80 replace-script-btn" 
                                  data-script="UPGRADE.sh" data-type="装载">
                            <i class="fa fa-refresh" title="替换"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                    
                    <!-- 脚本9：未上传 -->
                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="script-required mr-2">接入用户</span>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="font-medium text-gray-400">RELOAD_USER.sh</span>
                          <span class="script-missing ml-2">未上传</span>
                        </div>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-400">-</td>
                      <td class="px-4 py-3">
                        <div class="flex space-x-2">
                          <button class="text-primary hover:text-primary/80 upload-script-btn" 
                                  data-script="RELOAD_USER.sh" data-type="接入用户">
                            <i class="fa fa-upload" title="上传"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                    
                    <!-- 脚本10：未上传 -->
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="script-required mr-2">删除软件包</span>
                        </div>
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex items-center">
                          <span class="font-medium text-gray-400">DELETE_PACKAGE.sh</span>
                          <span class="script-missing ml-2">未上传</span>
                        </div>
                      </td>
                      <td class="px-4 py-3 text-sm text-gray-400">-</td>
                      <td class="px-4 py-3">
                        <div class="flex space-x-2">
                          <button class="text-primary hover:text-primary/80 upload-script-btn" 
                                  data-script="DELETE_PACKAGE.sh" data-type="删除软件包">
                            <i class="fa fa-upload" title="上传"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 单个脚本上传/替换模态框 -->
  <div id="singleUploadModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md scale-in">
      <div class="p-4 border-b border-gray-200 flex justify-between items-center">
        <h3 class="font-semibold" id="singleUploadTitle">上传脚本 - 接入用户</h3>
        <button class="text-gray-500 hover:text-gray-700 close-modal" data-modal="singleUploadModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="p-6">
        <p class="text-sm mb-4">请上传以下脚本文件，文件名必须严格匹配：</p>
        <div class="bg-gray-light rounded-lg p-3 mb-4">
          <p class="font-medium text-primary" id="requiredScriptName">RELOAD_USER.sh</p>
        </div>
        
        <div id="singleUploadArea" class="border-2 border-dashed border-gray-medium rounded-lg p-6 text-center mb-4 hover:border-primary transition-colors cursor-pointer">
          <input type="file" id="singleScriptFile" class="hidden" accept=".sh">
          <i class="fa fa-file-code-o text-3xl text-gray-medium mb-2"></i>
          <p class="text-sm text-gray-dark mb-1">点击或拖拽文件至此处上传</p>
          <p class="text-xs text-gray-500">支持 .sh 格式的脚本文件</p>
        </div>
        
        <!-- 错误提示 -->
        <div id="singleUploadError" class="hidden bg-danger/10 p-2 rounded-lg text-sm text-danger mb-4">
          <i class="fa fa-exclamation-circle mr-1"></i>
          <span id="singleUploadErrorMessage">文件名错误，请上传正确的RELOAD_USER.sh文件</span>
        </div>
        
        <!-- 上传进度 -->
        <div id="singleUploadProgress" class="hidden mb-4">
          <div class="flex justify-between items-center mb-1">
            <span class="text-sm">上传中...</span>
            <span class="text-sm text-primary" id="singleUploadPercent">0%</span>
          </div>
          <div class="h-2 bg-gray-light rounded-full overflow-hidden">
            <div id="singleUploadBar" class="h-full bg-primary w-0 transition-all duration-300"></div>
          </div>
        </div>
      </div>
      
      <div class="p-4 border-t border-gray-200 flex justify-end">
        <button class="border border-gray-300 hover:bg-gray-50 px-4 py-2 rounded mr-2 close-modal" data-modal="singleUploadModal">取消</button>
        <button id="confirmSingleUploadBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded transition-all">确认上传</button>
      </div>
    </div>
  </div>

  <!-- 批量上传脚本模态框 -->
  <div id="batchUploadModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-2xl scale-in">
      <div class="p-4 border-b border-gray-200 flex justify-between items-center">
        <h3 class="font-semibold">批量上传脚本</h3>
        <button class="text-gray-500 hover:text-gray-700 close-modal" data-modal="batchUploadModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="p-6">
        <p class="text-sm mb-4">请上传一个包含所需脚本的ZIP压缩包，支持的脚本文件包括：</p>
        
        <div class="bg-gray-light rounded-lg p-3 mb-4 flex flex-wrap gap-2 max-h-32 overflow-y-auto">
          <span class="px-2 py-1 bg-white rounded text-xs">CODE_CHECK.sh</span>
          <span class="px-2 py-1 bg-white rounded text-xs">INTERGRITY_CHECK.sh</span>
          <span class="px-2 py-1 bg-white rounded text-xs">SECURITY_CHECK.sh</span>
          <span class="px-2 py-1 bg-white rounded text-xs">CONFIG_CENTER_CHECK.sh</span>
          <span class="px-2 py-1 bg-white rounded text-xs">BACKUP.sh</span>
          <span class="px-2 py-1 bg-white rounded text-xs">CONFIG_CHECK.sh</span>
          <span class="px-2 py-1 bg-white rounded text-xs">RELEASE_USER.sh</span>
          <span class="px-2 py-1 bg-white rounded text-xs">UPGRADE.sh</span>
          <span class="px-2 py-1 bg-white rounded text-xs">RELOAD_USER.sh</span>
          <span class="px-2 py-1 bg-white rounded text-xs">DELETE_PACKAGE.sh</span>
        </div>
        
        <div id="batchUploadArea" class="border-2 border-dashed border-gray-medium rounded-lg p-6 text-center mb-4 hover:border-primary transition-colors cursor-pointer">
          <input type="file" id="batchScriptFile" class="hidden" accept=".zip">
          <i class="fa fa-file-archive-o text-3xl text-gray-medium mb-2"></i>
          <p class="text-sm text-gray-dark mb-1">点击或拖拽ZIP压缩包至此处上传</p>
          <p class="text-xs text-gray-500">支持 .zip 格式的压缩包，大小不超过10MB</p>
        </div>
        
        <!-- 错误提示 -->
        <div id="batchUploadError" class="hidden bg-danger/10 p-2 rounded-lg text-sm text-danger mb-4">
          <i class="fa fa-exclamation-circle mr-1"></i>
          <span id="batchUploadErrorMessage">压缩包中包含无效文件：INVALID_FILE.sh</span>
        </div>
        
        <!-- 上传进度 -->
        <div id="batchUploadProgress" class="hidden mb-4">
          <div class="flex justify-between items-center mb-1">
            <span class="text-sm">上传并校验中...</span>
            <span class="text-sm text-primary" id="batchUploadPercent">0%</span>
          </div>
          <div class="h-2 bg-gray-light rounded-full overflow-hidden">
            <div id="batchUploadBar" class="h-full bg-primary w-0 transition-all duration-300"></div>
          </div>
        </div>
      </div>
      
      <div class="p-4 border-t border-gray-200 flex justify-end">
        <button class="border border-gray-300 hover:bg-gray-50 px-4 py-2 rounded mr-2 close-modal" data-modal="batchUploadModal">取消</button>
        <button id="confirmBatchUploadBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded transition-all">确认上传</button>
      </div>
    </div>
  </div>

  <!-- 查看脚本内容模态框 -->
  <div id="viewScriptModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-3xl max-h-[80vh] scale-in">
      <div class="p-4 border-b border-gray-200 flex justify-between items-center">
        <h3 class="font-semibold" id="viewScriptTitle">查看脚本 - CODE_CHECK.sh</h3>
        <button class="text-gray-500 hover:text-gray-700 close-modal" data-modal="viewScriptModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="p-6 overflow-y-auto max-h-[calc(80vh-120px)]">
        <pre id="scriptContent" class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">#!/bin/bash
# 代码检查脚本
# 功能：检查升级包中的代码完整性和语法正确性

echo "开始执行代码检查..."

# 检查关键文件是否存在
if [ ! -f "main.py" ]; then
    echo "错误：缺少主程序文件 main.py"
    exit 1
fi

# 执行语法检查
python -m py_compile main.py
if [ $? -ne 0 ]; then
    echo "错误：代码语法检查失败"
    exit 1
fi

echo "代码检查完成，未发现问题"
exit 0</pre>
      </div>
      
      <div class="p-4 border-t border-gray-200 flex justify-end">
        <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded transition-all close-modal" data-modal="viewScriptModal">关闭</button>
      </div>
    </div>
  </div>

  <!-- 删除确认模态框 -->
  <div id="deleteConfirmModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md scale-in">
      <div class="p-4 border-b border-gray-200 flex justify-between items-center">
        <h3 class="font-semibold">确认删除</h3>
        <button class="text-gray-500 hover:text-gray-700 close-modal" data-modal="deleteConfirmModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="p-6">
        <div class="flex items-start mb-4">
          <i class="fa fa-exclamation-triangle text-warning text-xl mt-0.5 mr-3"></i>
          <div>
            <h4 class="font-medium">确定要删除这个脚本包吗？</h4>
            <p class="text-sm text-gray-dark mt-1">删除后将无法恢复，所有关联的脚本文件也将被删除。</p>
            <p class="text-sm font-medium mt-3" id="deletePackageName">基础脚本包</p>
          </div>
        </div>
      </div>
      
      <div class="p-4 border-t border-gray-200 flex justify-end">
        <button class="border border-gray-300 hover:bg-gray-50 px-4 py-2 rounded mr-2 close-modal" data-modal="deleteConfirmModal">取消</button>
        <button id="confirmDeleteBtn" class="bg-danger hover:bg-danger/90 text-white px-4 py-2 rounded transition-all">确认删除</button>
      </div>
    </div>
  </div>

  <!-- 提示消息 -->
  <div id="toast" class="fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 flex items-center space-x-2 z-50"></div>

  <script>
    // 定义10个必需的脚本信息
    const REQUIRED_SCRIPTS = [
      { code: "CODE_CHECK.sh", name: "代码检查" },
      { code: "INTERGRITY_CHECK.sh", name: "完整性校验" },
      { code: "SECURITY_CHECK.sh", name: "环境安全检查" },
      { code: "CONFIG_CENTER_CHECK.sh", name: "配置文件网关检查" },
      { code: "BACKUP.sh", name: "备份" },
      { code: "CONFIG_CHECK.sh", name: "参数配置" },
      { code: "RELEASE_USER.sh", name: "释放用户" },
      { code: "UPGRADE.sh", name: "装载" },
      { code: "RELOAD_USER.sh", name: "接入用户" },
      { code: "DELETE_PACKAGE.sh", name: "删除软件包" }
    ];
    
    // 当前选中的脚本包ID
    let currentPackageId = 1;
    
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化事件监听
      initEventListeners();
    });
    
    // 初始化所有事件监听
    function initEventListeners() {
      // 脚本包列表点击事件
      document.querySelectorAll('.package-item').forEach(item => {
        item.addEventListener('click', function() {
          document.querySelectorAll('.package-item').forEach(i => i.classList.remove('active', 'bg-gray-50'));
          this.classList.add('active', 'bg-gray-50');
          currentPackageId = this.getAttribute('data-package-id');
          // 加载脚本包详情
          loadPackageDetails(currentPackageId);
        });
      });
      
      // 查看脚本包详情按钮
      document.querySelectorAll('.view-package-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
          e.stopPropagation();
          const packageId = this.getAttribute('data-package-id');
          document.querySelectorAll('.package-item').forEach(i => i.classList.remove('active', 'bg-gray-50'));
          document.querySelector(`.package-item[data-package-id="${packageId}"]`).classList.add('active', 'bg-gray-50');
          currentPackageId = packageId;
          loadPackageDetails(packageId);
        });
      });
      
      // 单个脚本上传按钮
      document.querySelectorAll('.upload-script-btn, .replace-script-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          const scriptName = this.getAttribute('data-script');
          const scriptType = this.getAttribute('data-type');
          
          // 设置模态框标题和必填文件名
          document.getElementById('singleUploadTitle').textContent = `上传脚本 - ${scriptType}`;
          document.getElementById('requiredScriptName').textContent = scriptName;
          document.getElementById('singleScriptFile').setAttribute('data-required-name', scriptName);
          
          // 重置状态
          document.getElementById('singleUploadError').classList.add('hidden');
          document.getElementById('singleUploadProgress').classList.add('hidden');
          document.getElementById('singleScriptFile').value = '';
          
          // 显示模态框
          document.getElementById('singleUploadModal').classList.remove('hidden');
          document.body.style.overflow = 'hidden';
        });
      });
      
      // 单个上传区域点击事件
      document.getElementById('singleUploadArea').addEventListener('click', function() {
        document.getElementById('singleScriptFile').click();
      });
      
      // 单个文件选择事件
      document.getElementById('singleScriptFile').addEventListener('change', function(e) {
        validateSingleFile(this, e.target.files);
      });
      
      // 确认单个上传按钮
      document.getElementById('confirmSingleUploadBtn').addEventListener('click', function() {
        const fileInput = document.getElementById('singleScriptFile');
        const files = fileInput.files;
        const requiredName = fileInput.getAttribute('data-required-name');
        
        if (files.length === 0) {
          showToast('请选择要上传的文件', 'error');
          return;
        }
        
        if (!validateSingleFile(fileInput, files)) {
          return;
        }
        
        // 显示上传进度
        document.getElementById('singleUploadError').classList.add('hidden');
        document.getElementById('singleUploadProgress').classList.remove('hidden');
        
        // 模拟上传进度
        simulateUpload('single', requiredName);
      });
      
      // 批量上传脚本按钮
      document.getElementById('batchUploadScriptsBtn').addEventListener('click', function() {
        // 重置状态
        document.getElementById('batchUploadError').classList.add('hidden');
        document.getElementById('batchUploadProgress').classList.add('hidden');
        document.getElementById('batchScriptFile').value = '';
        
        // 显示模态框
        document.getElementById('batchUploadModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
      });
      
      // 批量上传区域点击事件
      document.getElementById('batchUploadArea').addEventListener('click', function() {
        document.getElementById('batchScriptFile').click();
      });
      
      // 确认批量上传按钮
      document.getElementById('confirmBatchUploadBtn').addEventListener('click', function() {
        const fileInput = document.getElementById('batchScriptFile');
        const files = fileInput.files;
        
        if (files.length === 0) {
          showToast('请选择要上传的ZIP压缩包', 'error');
          return;
        }
        
        // 显示上传进度
        document.getElementById('batchUploadError').classList.add('hidden');
        document.getElementById('batchUploadProgress').classList.remove('hidden');
        
        // 模拟上传进度
        simulateBatchUpload();
      });
      
      // 查看脚本按钮
      document.querySelectorAll('.view-script-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          const scriptName = this.getAttribute('data-script');
          const scriptType = this.getAttribute('data-type');
          
          // 设置模态框标题
          document.getElementById('viewScriptTitle').textContent = `查看脚本 - ${scriptName}`;
          
          // 显示模态框
          document.getElementById('viewScriptModal').classList.remove('hidden');
          document.body.style.overflow = 'hidden';
        });
      });
      
      // 下载脚本按钮
      document.querySelectorAll('.download-script-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          const scriptName = this.getAttribute('data-script');
          showToast(`开始下载 ${scriptName}`, 'success');
        });
      });
      
      // 删除脚本包按钮
      document.getElementById('deletePackageBtn').addEventListener('click', function() {
        const packageName = document.getElementById('currentPackageTitle').textContent;
        document.getElementById('deletePackageName').textContent = packageName;
        
        // 显示确认模态框
        document.getElementById('deleteConfirmModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
      });
      
      // 确认删除按钮
      document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        closeModal('deleteConfirmModal');
        
        // 模拟删除操作
        setTimeout(() => {
          // 移除当前脚本包
          document.querySelector(`.package-item[data-package-id="${currentPackageId}"]`).remove();
          
          // 如果还有其他脚本包，切换到第一个
          const firstPackage = document.querySelector('.package-item');
          if (firstPackage) {
            firstPackage.click();
          } else {
            // 如果没有脚本包了，显示空状态
            document.getElementById('currentPackageTitle').textContent = '未选择脚本包';
            document.getElementById('currentPackageInfo').textContent = '';
          }
          
          showToast('脚本包已成功删除', 'success');
        }, 500);
      });
      
      // 新建空白脚本包按钮
      document.getElementById('newPackageBtn').addEventListener('click', function() {
        // 生成新的脚本包ID
        const newId = Date.now().toString();
        
        // 添加到脚本包列表
        const packageList = document.getElementById('packageList');
        const newPackage = document.createElement('div');
        newPackage.className = 'p-4 hover:bg-gray-50 transition-colors cursor-pointer package-item';
        newPackage.setAttribute('data-package-id', newId);
        newPackage.innerHTML = `
          <div class="flex justify-between items-start">
            <div>
              <h4 class="font-medium">新脚本包</h4>
              <p class="text-xs text-gray-dark mt-0.5">创建于 ${formatDate(new Date())}</p>
            </div>
            <span class="script-missing">未上传</span>
          </div>
          <div class="mt-2 flex items-center justify-between text-sm">
            <span class="text-gray-dark">包含 0 个脚本</span>
            <button class="text-primary view-package-btn" data-package-id="${newId}">查看详情</button>
          </div>
        `;
        packageList.prepend(newPackage);
        
        // 切换到新脚本包
        newPackage.click();
        
        // 更新详情页信息
        document.getElementById('packageName').value = '新脚本包';
        
        showToast('已创建空白脚本包，请上传所需脚本', 'success');
      });
      
      // 保存脚本包信息按钮
      document.getElementById('savePackageInfoBtn').addEventListener('click', function() {
        const name = document.getElementById('packageName').value.trim();
        
        if (!name) {
          showToast('请输入脚本包名称', 'error');
          return;
        }
        
        // 更新当前显示的标题
        document.getElementById('currentPackageTitle').textContent = name;
        
        // 更新列表中的对应项
        const packageItem = document.querySelector(`.package-item[data-package-id="${currentPackageId}"]`);
        if (packageItem) {
          packageItem.querySelector('h4').textContent = name;
        }
        
        showToast('脚本包信息已保存', 'success');
      });
      
      // 关闭模态框按钮
      document.querySelectorAll('.close-modal').forEach(btn => {
        btn.addEventListener('click', function() {
          const modalId = this.getAttribute('data-modal');
          closeModal(modalId);
        });
      });
      
      // 点击模态框外部关闭
      document.querySelectorAll('.fixed.inset-0.bg-black\\/50').forEach(modal => {
        modal.addEventListener('click', function(e) {
          if (e.target === this) {
            const modalId = this.id;
            closeModal(modalId);
          }
        });
      });
      
      // 搜索功能
      document.getElementById('packageSearch').addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        document.querySelectorAll('.package-item').forEach(item => {
          const packageName = item.querySelector('h4').textContent.toLowerCase();
          if (packageName.includes(searchTerm)) {
            item.style.display = '';
          } else {
            item.style.display = 'none';
          }
        });
      });
    }
    
    // 验证单个上传文件
    function validateSingleFile(input, files) {
      const errorEl = document.getElementById('singleUploadError');
      const errorMessageEl = document.getElementById('singleUploadErrorMessage');
      
      if (files.length === 0) {
        errorEl.classList.add('hidden');
        return false;
      }
      
      const requiredName = input.getAttribute('data-required-name');
      const fileName = files[0].name;
      
      if (fileName !== requiredName) {
        errorMessageEl.textContent = `文件名错误，请上传正确的${requiredName}文件`;
        errorEl.classList.remove('hidden');
        return false;
      } else {
        errorEl.classList.add('hidden');
        return true;
      }
    }
    
    // 模拟单个文件上传
    function simulateUpload(type, fileName) {
      let progress = 0;
      const progressBar = document.getElementById(`${type}UploadBar`);
      const progressPercent = document.getElementById(`${type}UploadPercent`);
      
      const interval = setInterval(() => {
        progress += Math.random() * 10;
        if (progress >= 100) {
          progress = 100;
          clearInterval(interval);
          
          // 模拟上传完成
          setTimeout(() => {
            closeModal(`${type}UploadModal`);
            
            // 更新脚本状态为已上传
            updateScriptStatus(fileName, true);
            
            showToast(`脚本 ${fileName} 上传成功`, 'success');
          }, 500);
        }
        
        progressBar.style.width = `${progress}%`;
        progressPercent.textContent = `${Math.round(progress)}%`;
      }, 200);
    }
    
    // 模拟批量上传
    function simulateBatchUpload() {
      let progress = 0;
      const progressBar = document.getElementById('batchUploadBar');
      const progressPercent = document.getElementById('batchUploadPercent');
      const errorEl = document.getElementById('batchUploadError');
      const errorMessageEl = document.getElementById('batchUploadErrorMessage');
      
      const interval = setInterval(() => {
        progress += Math.random() * 8;
        
        // 模拟在70%时进行文件校验
        if (progress >= 70 && progress < 80) {
          // 随机模拟是否有错误
          const hasError = Math.random() > 0.7; // 30%概率有错误
          
          if (hasError) {
            clearInterval(interval);
            errorMessageEl.textContent = '压缩包中包含无效文件：INVALID_SCRIPT.sh, TEST.sh';
            errorEl.classList.remove('hidden');
            progressBar.style.width = '70%';
            progressPercent.textContent = '70%';
            return;
          }
        }
        
        if (progress >= 100) {
          progress = 100;
          clearInterval(interval);
          
          // 模拟上传完成
          setTimeout(() => {
            closeModal('batchUploadModal');
            
            // 随机更新几个脚本的状态
            const randomScripts = [...REQUIRED_SCRIPTS]
              .sort(() => 0.5 - Math.random())
              .slice(0, Math.floor(Math.random() * 5) + 3);
            
            randomScripts.forEach(script => {
              updateScriptStatus(script.code, true);
            });
            
            showToast('批量脚本上传成功，已更新脚本状态', 'success');
          }, 500);
        }
        
        progressBar.style.width = `${progress}%`;
        progressPercent.textContent = `${Math.round(progress)}%`;
      }, 200);
    }
    
    // 更新脚本状态
    function updateScriptStatus(scriptName, isUploaded) {
      // 找到对应的行
      const rows = document.querySelectorAll('tbody tr');
      let targetRow = null;
      
      rows.forEach(row => {
        const fileNameEl = row.querySelector('td:nth-child(2) .font-medium');
        if (fileNameEl && fileNameEl.textContent === scriptName) {
          targetRow = row;
        }
      });
      
      if (!targetRow) return;
      
      // 更新状态标签
      const statusContainer = targetRow.querySelector('td:nth-child(2)');
      const actionContainer = targetRow.querySelector('td:nth-child(4)');
      
      if (isUploaded) {
        // 更新为已上传状态
        statusContainer.innerHTML = `
          <div class="flex items-center">
            <span class="font-medium">${scriptName}</span>
            <span class="script-uploaded ml-2">已上传</span>
          </div>
        `;
        
        // 更新上传时间
        targetRow.querySelector('td:nth-child(3)').textContent = formatDate(new Date());
        targetRow.querySelector('td:nth-child(3)').className = 'px-4 py-3 text-sm text-gray-dark';
        
        // 更新操作按钮
        const scriptType = targetRow.querySelector('td:first-child .script-required').textContent;
        actionContainer.innerHTML = `
          <div class="flex space-x-2">
            <button class="text-primary hover:text-primary/80 view-script-btn" 
                    data-script="${scriptName}" data-type="${scriptType}">
              <i class="fa fa-eye" title="查看"></i>
            </button>
            <button class="text-primary hover:text-primary/80 download-script-btn" 
                    data-script="${scriptName}">
              <i class="fa fa-download" title="下载"></i>
            </button>
            <button class="text-warning hover:text-warning/80 replace-script-btn" 
                    data-script="${scriptName}" data-type="${scriptType}">
              <i class="fa fa-refresh" title="替换"></i>
            </button>
          </div>
        `;
        
        // 重新绑定事件
        initEventListeners();
      } else {
        // 更新为未上传状态
        statusContainer.innerHTML = `
          <div class="flex items-center">
            <span class="font-medium text-gray-400">${scriptName}</span>
            <span class="script-missing ml-2">未上传</span>
          </div>
        `;
        
        targetRow.querySelector('td:nth-child(3)').textContent = '-';
        targetRow.querySelector('td:nth-child(3)').className = 'px-4 py-3 text-sm text-gray-400';
        
        const scriptType = targetRow.querySelector('td:first-child .script-required').textContent;
        actionContainer.innerHTML = `
          <div class="flex space-x-2">
            <button class="text-primary hover:text-primary/80 upload-script-btn" 
                    data-script="${scriptName}" data-type="${scriptType}">
              <i class="fa fa-upload" title="上传"></i>
            </button>
          </div>
        `;
        
        // 重新绑定事件
        initEventListeners();
      }
      
      // 更新脚本包信息
      updatePackageInfo();
    }
    
    // 更新脚本包信息
    function updatePackageInfo() {
      // 统计已上传的脚本数量
      const totalScripts = REQUIRED_SCRIPTS.length;
      const uploadedScripts = document.querySelectorAll('.script-uploaded').length;
      
      // 更新信息显示
      document.getElementById('currentPackageInfo').textContent = 
        `创建于 ${formatDate(new Date())} · 包含 ${uploadedScripts} 个脚本`;
      
      // 更新列表中的显示
      const packageItem = document.querySelector(`.package-item[data-package-id="${currentPackageId}"]`);
      if (packageItem) {
        const statusEl = packageItem.querySelector('span');
        const countEl = packageItem.querySelector('.mt-2 span.text-gray-dark');
        
        countEl.textContent = `包含 ${uploadedScripts} 个脚本`;
        
        if (uploadedScripts === 0) {
          statusEl.className = 'script-missing';
          statusEl.textContent = '未上传';
          countEl.textContent = '包含 0 个脚本';
        } else if (uploadedScripts === totalScripts) {
          statusEl.className = 'script-uploaded';
          statusEl.textContent = '完整';
          countEl.textContent = `包含 ${totalScripts} 个脚本`;
        } else {
          statusEl.className = 'script-missing';
          statusEl.textContent = '不完整';
          countEl.textContent = `包含 ${uploadedScripts} 个脚本（缺${totalScripts - uploadedScripts}个）`;
        }
      }
    }
    
    // 加载脚本包详情
    function loadPackageDetails(packageId) {
      // 模拟从服务器加载数据
      let packageName, uploadedScripts;
      
      switch(packageId) {
        case '1':
          packageName = '基础脚本包';
          uploadedScripts = ['CODE_CHECK.sh', 'INTERGRITY_CHECK.sh', 'SECURITY_CHECK.sh', 
                            'CONFIG_CENTER_CHECK.sh', 'BACKUP.sh', 'CONFIG_CHECK.sh', 
                            'RELEASE_USER.sh', 'UPGRADE.sh'];
          break;
        case '2':
          packageName = '增强脚本包';
          uploadedScripts = ['CODE_CHECK.sh', 'INTERGRITY_CHECK.sh', 'SECURITY_CHECK.sh', 
                            'CONFIG_CENTER_CHECK.sh', 'BACKUP.sh', 'CONFIG_CHECK.sh', 
                            'RELEASE_USER.sh', 'UPGRADE.sh'];
          break;
        default:
          packageName = '自定义脚本包';
          uploadedScripts = [];
      }
      
      // 更新详情页信息
      document.getElementById('currentPackageTitle').textContent = packageName;
      document.getElementById('packageName').value = packageName;
      
      // 更新脚本状态
      REQUIRED_SCRIPTS.forEach(script => {
        const isUploaded = uploadedScripts.includes(script.code);
        updateScriptStatus(script.code, isUploaded);
      });
    }
    
    // 关闭模态框
    function closeModal(modalId) {
      document.getElementById(modalId).classList.add('hidden');
      document.body.style.overflow = '';
    }
    
    // 显示提示消息
    function showToast(message, type = 'success') {
      const toast = document.getElementById('toast');
      let icon = 'fa-check-circle';
      let bgColor = 'bg-success';
      
      if (type === 'error') {
        icon = 'fa-exclamation-circle';
        bgColor = 'bg-danger';
      } else if (type === 'warning') {
        icon = 'fa-exclamation-triangle';
        bgColor = 'bg-warning';
      } else if (type === 'info') {
        icon = 'fa-info-circle';
        bgColor = 'bg-primary';
      }
      
      toast.className = `fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg transform transition-transform duration-300 flex items-center space-x-2 z-50 text-white ${bgColor}`;
      toast.innerHTML = `
        <i class="fa ${icon}"></i>
        <span>${message}</span>
      `;
      
      // 显示提示
      setTimeout(() => {
        toast.style.transform = 'translateX(0)';
      }, 100);
      
      // 3秒后隐藏
      setTimeout(() => {
        toast.style.transform = 'translateX(calc(100% + 20px))';
      }, 3000);
    }
    
    // 格式化日期
    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  </script>
</body>
</html>
